<template>
  <el-form-item class="year-month-picker" label="选择时间">
    <el-select
      ref="timeType"
      v-model="timeType"
      placeholder="请选择时间类型"
      style="width: 80px"
      @change="timeTypeChangeHandler"
    >
      <el-option
        v-for="option in timeTypeOptions"
        :key="option.value"
        v-bind="option"
      ></el-option>
    </el-select>
    <el-date-picker
      v-model="time"
      placeholder="请选择时间"
      :type="pickerType"
      :format="pickerFormatter"
      :picker-options="pickerOptions"
      :clearable="false"
      @change="timeChangeHandler"
    ></el-date-picker>
  </el-form-item>
</template>

<script>
export const TIME_TYPE_OPTIONS = [
  { label: '年', value: '1y' },
  { label: '月', value: '1M' },
  { label: '日', value: '1d' }
];

/**
 * 通过 time 反推 timeType
 * @param {string} value 时间，如：```2023-01-01``` 对应 ```1d```
 * @returns {string} timeType 时间类型 ```1y``` | ```1M``` | ```1d```
 */
export function getTimeTypeFromTime(value) {
  if (/^\d{4}$/.test(value)) return '1y';
  if (/^\d{4}-\d{2}$/.test(value)) return '1M';
  if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return '1d';
}

export default {
  name: 'year-month-picker',
  props: {
    value: String,
    allowDate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    const timeTypeOptions = [];
    TIME_TYPE_OPTIONS.forEach(item => {
      if (!this.allowDate && item.value === '1d') return;
      timeTypeOptions.push({ ...item });
    });
    return {
      time: new Date().getFullYear() + '',
      timeType: '1y',
      timeTypeOptions,
      pickerOptions: {
        disabledDate(date) {
          return date > new Date();
        }
      }
    };
  },
  computed: {
    pickerType() {
      switch (this.timeType) {
        case '1y':
          return 'year';
        case '1M':
          return 'month';
        case '1d':
          return 'date';
      }
      return 'date';
    },
    pickerFormatter() {
      switch (this.timeType) {
        case '1y':
          return 'yyyy';
        case '1M':
          return 'yyyy-MM';
        case '1d':
          return 'yyyy-MM-dd';
      }
      return 'yyyy-MM-dd';
    },
    dayjsFormatter() {
      switch (this.timeType) {
        case '1y':
          return 'YYYY';
        case '1M':
          return 'YYYY-MM';
        case '1d':
          return 'YYYY-MM-DD';
      }
      return 'YYYY-MM-DD';
    }
  },
  mounted() {
    this.$emit('input', this.$dayjs(this.time).format(this.dayjsFormatter));
  },
  methods: {
    timeTypeChangeHandler() {
      this.time = new Date();
      this.$emit('input', this.$dayjs(this.time).format(this.dayjsFormatter));
    },
    timeChangeHandler(val) {
      this.$emit('input', this.$dayjs(val).format(this.dayjsFormatter));
    },
  }
};
</script>

<style lang="scss" scoped>
.year-month-picker {
  &::v-deep .is-focus {
    z-index: 1;
  }
  &::v-deep .el-select {
    input {
      border-radius: 4px 0px 0px 4px;
      position: relative;
      z-index: 0;

      &:focus,
      &:hover {
        z-index: 1;
      }
    }
    .el-input__suffix {
      z-index: 2;
    }
  }
  &::v-deep .el-date-editor input {
    position: relative;
    border-radius: 0px 4px 4px 0px;
    // border-left: none !important;
    margin-left: -1px;
    z-index: 0;
  }
}
</style>
